﻿<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="keywords" content="Javascript交互" />
		<meta name="description" content="常用的Javascrtip交互效果，如页面工具、对话框、提示、表单验证等。" />
		<title>JS组件,Javascript交互-拼图Pintuer</title>
		<link href="pintuer.css" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
		<script src="jquery.js"></script>
		<script src="pintuer.js"></script>
		<script src="plugins/respond.js"></script>
		<link type="image/x-icon" href="/favicon.ico" rel="shortcut icon" />
		<link href="/favicon.ico" rel="bookmark icon" />
	</head>

	<body>
		<div class="layout doc-header fixed" style="z-index: 10;">
			<div class="container doc-naver">
				<div class="line">
					<div class="xs3 xm3 xb3 doc-logo">
						<button class="button icon-navicon margin-top float-right" data-target="#doc-header-pintuer">
						</button>
						<a href="index.html">
							<img src="images/logo.png" width="180" height="40" alt="拼图" class="ring-hover" />
						</a>
					</div>
					<div class="xl12 xs9 xm9 xb9 doc-nav">
						<ul class="nav nav-inline nav-navicon padding-small-top nav-menu" id="doc-header-pintuer">
							<li><a href="index.html">起步</a> </li>
							<li><a href="css.html">CSS</a> </li>
							<li><a href="widgets.html">元件</a> </li>
							<li class="active"><a href="javascript.html">JS组件</a> </li>
							<li><a href="react.html">常用</a></li>
							<li>
							<a href="react.html">其他工具<span class="arrow"></span></a>
							<ul class="drop-menu">
								<li><a href="tools/viewcode.html">代码预览工具</a></li>
								<li><a href="tools/setcolor.html">配色工具</a></li>
								<li><a href="tools/color.html">自定义颜色生成</a></li>
								<li><a href="http://www.box3.cn/">开发工具箱</a></li>
								<li><a href="https://tool.lu/">tool.lu工具箱</a></li>
							</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="bg-main doc-intro">
				<div class="container">
                        <h1 class="fadein-top">Javascript交互</h1>
                        <p class="fadein-bottom">常用的Javascript交互效果，如页面工具、对话框、提示、表单验证等。</p>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="line">
				<div class="xl12 xs12 xm9 xb9">
					<!--list.start-->
					<div class="doc-right">
						<h2 class="doc-h2" id="overview">
                        概述
                    </h2>
						<p class="doc-lead">
							Javascript组件是由一系列CSS及元件配合JS的效果，实现众多的交互效果。</p>
						<br />
						<br />
						<h2 class="doc-h2" id="win">
                        窗口工具
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="home-favorite">
                        设为首页，加入收藏
                    </h3>
						<p class="doc-readme">
							给元素加入.win-homepage或.win-favorite样式，实现设为首页及加入收藏功能。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<button class="button win-homepage icon-home">
									设为首页</button>
								<button class="button win-favorite icon-star">
									加入收藏</button>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button class="button win-homepage icon-home">
	设为首页</button>
<button class="button win-favorite icon-star">
	加入收藏</button>
</xmp>
						</div>
						<h3 class="doc-h3" id="forward-back-backtop">
                        前进后退及返回顶部
                    </h3>
						<p class="doc-readme">
							给元素加.win-forward,.win-back,.win-backtop样式，实现前进、后退、返回顶部效果。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<button class="button win-back icon-arrow-left">
									后退</button>
								<button class="button win-forward">
									前进 <span class="icon-arrow-right"></span>
								</button>
								<button class="button win-backtop">
									返回顶部 <span class="icon-arrow-up"></span>
								</button>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button class="button win-back icon-arrow-left">
	后退</button>
<button class="button win-forward">
	前进 <span class="icon-arrow-right"></span>
</button>
<button class="button win-backtop">
	返回顶部 <span class="icon-arrow-up"></span>
</button>
</xmp>
						</div>
						<h3 class="doc-h3" id="refresh-print-close">
                        刷新，打印，关闭窗口
                    </h3>
						<p class="doc-readme">
							给元素添加.win-refresh,.win-print,.win-close样式，实现页面刷新，打印，关闭窗口等功能。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<button class="button win-refresh icon-refresh">
									刷新</button>
								<button class="button win-print icon-print">
									打印</button>
								<button class="button win-close icon-times-circle">
									关闭</button>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button class="button win-refresh icon-refresh">
	刷新</button>
<button class="button win-print icon-print">
	打印</button>
<button class="button win-close icon-times-circle">
	关闭</button>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="tabs">
                        选项标签
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="tab-style">
                        标签样式
                    </h3>
						<p class="doc-readme">
							通过样式及js配合，实现内容标签功能。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="tab">
									<div class="tab-head">
										<strong>拼图</strong> <span class="tab-more"><a href="#">更多</a></span>
										<ul class="tab-nav">
											<li class="active"><a href="#tab-start">起步</a> </li>
											<li><a href="#tab-css">样式</a> </li>
											<li><a href="#tab-units">元件</a> </li>
										</ul>
									</div>
									<div class="tab-body">
										<div class="tab-panel active" id="tab-start">
											拼图框架使用准备、基本的设置等信息。</div>
										<div class="tab-panel" id="tab-css">
											重新定义常用的CSS，对文本、图像、按钮、背景、表格等样式重新设置。</div>
										<div class="tab-panel" id="tab-units">
											常见的、可重复使用的样式组合，图标、标签、下拉菜单、按钮组、媒体对象、表单、面板等。</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="tab">
	<div class="tab-head">
		<strong>标题</strong> <span class="tab-more"><a href="#">更多</a></span>
		<ul class="tab-nav">
			<li class="active"><a href="#tab-start">...</a> </li>
			<li><a href="#tab-css">...</a> </li>
			<li><a href="#tab-units">...</a> </li>
		</ul>
	</div>
	<div class="tab-body">
		<div class="tab-panel active" id="tab-start">
			...</div>
		<div class="tab-panel" id="tab-css">
			...</div>
		<div class="tab-panel" id="tab-units">
			...</div>
	</div>
</div>
</xmp>
						</div>
						<blockquote class="quote border-green doc-quote">
							<strong>标题及更多</strong> 标题及更多，在使用中可根据需要使用或删除。</blockquote>
						<h4 class="doc-title">
                        内容盒子
                    </h4>
						<div class="doc-input">
							将tab-body添加tab-body-bordered，内容将包含在盒子里。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="tab" data-toggle="hover">
									<div class="tab-head">
										<strong>拼图</strong> <span class="tab-more"><a href="#">更多</a></span>
										<ul class="tab-nav">
											<li class="active"><a href="#tab-start2">起步</a> </li>
											<li><a href="#tab-css2">样式</a> </li>
											<li><a href="#tab-units2">元件</a> </li>
										</ul>
									</div>
									<div class="tab-body tab-body-bordered">
										<div class="tab-panel active" id="tab-start2">
											拼图框架使用准备、基本的设置等信息。</div>
										<div class="tab-panel" id="tab-css2">
											重新定义常用的CSS，对文本、图像、按钮、背景、表格等样式重新设置。</div>
										<div class="tab-panel" id="tab-units2">
											常见的、可重复使用的样式组合，图标、标签、下拉菜单、按钮组、媒体对象、表单、面板等。</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="tab" data-toggle="hover">
	<div class="tab-head">
		<strong>...</strong> <span class="tab-more"><a href="#">...</a></span>
		<ul class="tab-nav">
			<li class="active"><a href="#tab-start2">...</a> </li>
			<li><a href="#tab-css2">...</a> </li>
			<li><a href="#tab-units2">...</a> </li>
		</ul>
	</div>
	<div class="tab-body tab-body-bordered">
		<div class="tab-panel active" id="tab-start2">
			...</div>
		<div class="tab-panel" id="tab-css2">
			...</div>
		<div class="tab-panel" id="tab-units2">
			...</div>
	</div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        导航右侧显示
                    </h4>
						<div class="doc-input">
							给.tab-head添加.text-right样式，导航居右显示。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="tab">
									<div class="tab-head text-right">
										<strong>标题</strong> <span class="tab-more"><a href="#">更多</a></span>
										<ul class="tab-nav">
											<li class="active"><a href="#tab-start3">起步</a> </li>
											<li><a href="#tab-css3">CSS</a> </li>
											<li><a href="#tab-units3">元件</a> </li>
										</ul>
									</div>
									<div class="tab-body">
										<div class="tab-panel active" id="tab-start3">
											拼图框架使用准备、基本的设置等信息。</div>
										<div class="tab-panel" id="tab-css3">
											重新定义常用的CSS，对文本、图像、按钮、背景、表格等样式重新设置。</div>
										<div class="tab-panel" id="tab-units3">
											常见的、可重复使用的样式组合，图标、标签、下拉菜单、按钮组、媒体对象、表单、面板等。</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="tab">
	<div class="tab-head text-right">
		<strong>标题</strong> <span class="tab-more"><a href="#">更多</a></span>
		<ul class="tab-nav">
			<li class="active"><a href="#tab-start3">...</a> </li>
			<li><a href="#tab-css3">...</a> </li>
			<li><a href="#tab-units3">...</a> </li>
		</ul>
	</div>
	<div class="tab-body">
		<div class="tab-panel active" id="tab-start3">
			...</div>
		<div class="tab-panel" id="tab-css3">
			...</div>
		<div class="tab-panel" id="tab-units3">
			...</div>
	</div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        较小的标签
                    </h4>
						<div class="doc-input">
							给.tab添加.tab-small样式，可以使用更小的标签效果。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="tab tab-small">
									<div class="tab-head text-right">
										<strong>标题</strong> <span class="tab-more"><a href="#">更多</a></span>
										<ul class="tab-nav">
											<li class="active"><a href="#tab-start4">起步</a> </li>
											<li><a href="#tab-css4">CSS</a> </li>
											<li><a href="#tab-units4">元件</a> </li>
										</ul>
									</div>
									<div class="tab-body tab-body-bordered">
										<div class="tab-panel active" id="tab-start4">
											拼图框架使用准备、基本的设置等信息。</div>
										<div class="tab-panel" id="tab-css4">
											重新定义常用的CSS，对文本、图像、按钮、背景、表格等样式重新设置。</div>
										<div class="tab-panel" id="tab-units4">
											常见的、可重复使用的样式组合，图标、标签、下拉菜单、按钮组、媒体对象、表单、面板等。</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="tab tab-small">
	...</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="tab-border-color">
                        边框颜色
                    </h3>
						<p class="doc-readme">
							给.tab样式加上.border-(*)样式，可以改变边框颜色。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="tab border-main">
									<div class="tab-head">
										<strong>标题</strong> <span class="tab-more"><a href="#">更多</a></span>
										<ul class="tab-nav">
											<li class="active"><a href="#tab-start5">起步</a> </li>
											<li><a href="#tab-css5">CSS</a> </li>
											<li><a href="#tab-units5">元件</a> </li>
										</ul>
									</div>
									<div class="tab-body">
										<div class="tab-panel active" id="tab-start5">
											拼图框架使用准备、基本的设置等信息。</div>
										<div class="tab-panel" id="tab-css5">
											重新定义常用的CSS，对文本、图像、按钮、背景、表格等样式重新设置。</div>
										<div class="tab-panel" id="tab-units5">
											常见的、可重复使用的样式组合，图标、标签、下拉菜单、按钮组、媒体对象、表单、面板等。</div>
									</div>
								</div>
								<br />
								<br />
								<div class="tab border-sub tab-small" data-toggle="hover">
									<div class="tab-head text-right">
										<strong>标题</strong> <span class="tab-more"><a href="#">更多</a></span>
										<ul class="tab-nav">
											<li class="active"><a href="#tab-start6">起步</a> </li>
											<li><a href="#tab-css6">CSS</a> </li>
											<li><a href="#tab-units6">元件</a> </li>
										</ul>
									</div>
									<div class="tab-body tab-body-bordered">
										<div class="tab-panel active" id="tab-start6">
											拼图框架使用准备、基本的设置等信息。</div>
										<div class="tab-panel" id="tab-css6">
											重新定义常用的CSS，对文本、图像、按钮、背景、表格等样式重新设置。</div>
										<div class="tab-panel" id="tab-units6">
											常见的、可重复使用的样式组合，图标、标签、下拉菜单、按钮组、媒体对象、表单、面板等。</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="tab border-main">
	....</div>
<div class="tab border-sub tab-small" data-toggle="hover">
	<div class="tab-head text-right">
		...</div>
	<div class="tab-body tab-body-bordered">
		...</div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="tab-vars">
                        参数
                    </h3>
						<p class="doc-readme">
							选项标签只有一个参数供使用，即在.tab标签上，添加触发器data-toggle的效果，默认为点击。</p>
						<div class="doc-input">
							<div class="table-responsive">
								<table class="table table-bordered">
									<tr>
										<th>
											参数
										</th>
										<th>
											类型
										</th>
										<th>
											默认值
										</th>
										<th>
											可选值
										</th>
										<th>
											说明
										</th>
									</tr>
									<tr>
										<td rowspan="2">
											data-toggle
										</td>
										<td rowspan="2">
											字符串
										</td>
										<td rowspan="2">
											click
										</td>
										<td>
											click
										</td>
										<td>
											鼠标点击时显示
										</td>
									</tr>
									<tr>
										<td>
											hover
										</td>
										<td>
											鼠标经过时显示
										</td>
									</tr>
								</table>
							</div>
						</div>
						<div class="doc-code">
<xmp>
<div class="tab" data-toggle="hover">
	...</div>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="dialog">
                        对话框
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="dialog-style">
                        基本样式
                    </h3>
						<p class="doc-readme">
							对话框的基本样式，包含标题，内容在底部。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-dialog">
									<div class="dialog open">
										<div class="dialog-head">
											<span class="dialog-close close rotate-hover"></span><strong>对话框标题</strong>
										</div>
										<div class="dialog-body">
											对话框内容</div>
										<div class="dialog-foot">
											<button class="dialog-close button">
												取消</button>
											<button class="button bg-green">
												确认</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="dialog">
	<div class="dialog-head">
		<span class="dialog-close close rotate-hover"></span><strong>对话框标题</strong>
	</div>
	<div class="dialog-body">
		对话框内容</div>
	<div class="dialog-foot">
		<button class="dialog-close button">
			取消</button>
		<button class="button bg-green">
			确认</button>
	</div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        去掉头部或底部
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="doc-dialog">
									<div class="dialog open">
										<div class="dialog-head">
											<span class="dialog-close close rotate-hover"></span><strong>对话框标题</strong>
										</div>
										<div class="dialog-body">
											对话框内容</div>
									</div>
									<br />
									<div class="dialog open">
										<div class="dialog-body">
											对话框内容</div>
										<div class="dialog-foot">
											<button class="button button-small dialog-close">
												取消</button>
											<button class="button button-small bg-green">
												确认</button>
										</div>
									</div>
									<br />
									<div class="dialog open">
										<div class="dialog-body">
											对话框内容</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="dialog open">
	<div class="dialog-head">
		<span class="dialog-close close rotate-hover"></span><strong>对话框标题</strong>
	</div>
	<div class="dialog-body">
		对话框内容</div>
</div>
<div class="dialog open">
	<div class="dialog-body">
		对话框内容</div>
	<div class="dialog-foot">
		<button class="button button-small dialog-close">
			取消</button>
		<button class="button button-small bg-green">
			确认</button>
	</div>
</div>
<div class="dialog open">
	<div class="dialog-body">
		对话框内容</div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="dialog-click">
                        点击弹出
                    </h3>
						<p class="doc-readme">
							点击按钮，弹出对话框实例。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<button class="button button-big bg-main dialogs" data-toggle="click" data-target="#mydialog" data-mask="1" data-width="50%">
									弹出对话框</button>
								<div id="mydialog">
									<div class="dialog">
										<div class="dialog-head">
											<span class="close rotate-hover"></span><strong>对话框标题</strong>
										</div>
										<div class="dialog-body">
											对话框内容
										</div>
										<div class="dialog-foot">
											<button class="button dialog-close">
												取消</button>
											<button class="button bg-green">
												确认</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button class="button button-big bg-main dialogs" data-toggle="click" data-target="#mydialog" data-mask="1" data-width="50%">
	弹出对话框</button>
<div id="mydialog">
	<div class="dialog">
		<div class="dialog-head">
			<span class="close rotate-hover"></span><strong>对话框标题</strong>
		</div>
		<div class="dialog-body">
			对话框内容</div>
		<div class="dialog-foot">
			<button class="button dialog-close">
				取消</button>
			<button class="button bg-green">
				确认</button>
		</div>
	</div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="dialog-vars">
                        参数
                    </h3>
						<p class="doc-readme">
							对话框参数包含触发事件data-toggle，对话框宽度限制data-width，是否显示遮罩层data-mask,对象data-target和异步加载data-url组成。</p>
						<div class="doc-input">
							<div class="table-responsive">
								<table class="table table-bordered">
									<tr>
										<th>
											参数
										</th>
										<th>
											类型
										</th>
										<th>
											默认值
										</th>
										<th>
											可选值
										</th>
										<th>
											说明
										</th>
									</tr>
									<tr>
										<td rowspan="2">
											data-toggle
										</td>
										<td rowspan="2">
											字符串
										</td>
										<td rowspan="2">
											click
										</td>
										<td>
											click
										</td>
										<td>
											鼠标点击时显示
										</td>
									</tr>
									<tr>
										<td>
											hover
										</td>
										<td>
											鼠标经过时显示
										</td>
									</tr>
									<tr>
										<td>
											data-width
										</td>
										<td>
											字符串
										</td>
										<td>
											80%
										</td>
										<td>
											无
										</td>
										<td>
											对话框的宽度，带单位，可以使用px,%,em等。
										</td>
									</tr>
									<tr>
										<td>
											data-mask
										</td>
										<td>
											整数
										</td>
										<td>
											1
										</td>
										<td>
											无
										</td>
										<td>
											是否显示遮罩层：(可选)默认为1，当为其他值是不显示。
										</td>
									</tr>
									<tr>
										<td>
											data-target
										</td>
										<td>
											字符串
										</td>
										<td>
											无
										</td>
										<td>
											无
										</td>
										<td>
											获取显示元素的对象，可以是#id，也可以是.class
										</td>
									</tr>
									<tr>
										<td>
											data-url
										</td>
										<td>
											路径
										</td>
										<td>
											无
										</td>
										<td>
											无
										</td>
										<td>
											显示对应地址的内容，如：/images/dialog.html
										</td>
									</tr>
								</table>
							</div>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="tips">
                        提示
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="tips-style">
                        基本案例
                    </h3>
						<p class="doc-readme">
							提示信息的基本案例效果。</p>
						<div class="panel doc-demo ">
							<div class="panel-head doc-ad0">
								<strong>示例</strong>
							</div>
							<div class="panel-body">
								<p>
									<a href="javascript:void(0);" class="text-red tips" data-toggle="click" data-place="left" data-style="bg-main border-main" title="拼图" content="中国人自己的css框架">拼图 Pintuer</a>：国内优秀的HTML、CSS、JS<span class="text-main tips" data-toggle="hover" data-place="top"
									data-width="200px" title="跨屏响应式" content="自动适应不同设备不同分辨率。">跨屏响应式开源前端框架</span>，使用最新浏览器技术，为快速的前端开发提供一系统的文本、图标、<span class="text-dot tips" data-toggle="hover" data-style="bg-dot border-red" title="图片媒体" data-place="bottom" data-image="/images/128.png">媒体</span>、表格、表单、按钮、菜单、
									<span class="text-sub tips" data-toggle="hover" data-place="right" data-style="bg-yellow border-red" title="包含常规网格及响应式网格">网格系统</span>等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩<span class="text-mix tips" title="对象示例" data-target="#tips-target">游戏</span>一下快乐而轻松。
								</p>
								<p>
									拼图前端框架在传统CSS框架的基本上，增加了HTML5、CSS3、JS等技术组合应用，应用于最新的浏览器技术，同时兼容较早的浏览器，新旧结合，承前启后，<span class="text-red tips" data-width="200px" title="加载示例" data-url="/images/tip.html">开发者</span>只需把框架文件引入到项目中，就可以初现快速的共同开发，改变以往建立PC网站同时，再建立手机网站的局面，初站一站响应所有设备，大大提高了开发效率。</p>
								<div class="hidden" id="tips-target">
									<div style="padding: 10px;" class="bg-white">
										对象实例内容</div>
								</div>
							</div>
						</div>
						<h3 class="doc-h3" id="tips-use">
                        使用方法
                    </h3>
						<p class="doc-readme">
							给元素添加.tips样式，并配置相关参数，快速实现信息提示。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="text-center">
									<button class="button tips" data-toggle="hover" data-place="left" title="提示信息">
										悬浮左方提示</button>
									<button class="button tips" data-toggle="click" data-place="top" title="提示信息">
										点击上方提示</button>
									<button class="button tips" data-toggle="hover" data-place="right" title="提示信息">
										悬浮右方提示</button>
									<button class="button tips" data-toggle="hover" data-place="bottom" data-image="/images/128.png">
										悬浮下方图片提示</button>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<button class="button tips" data-toggle="hover" data-place="left" title="提示信息">
	悬浮左方提示</button>
<button class="button tips" data-toggle="click" data-place="top" title="提示信息">
	点击上方提示</button>
<button class="button tips" data-toggle="hover" data-place="right" title="提示信息">
	悬浮右方提示</button>
<button class="button tips" data-toggle="hover" data-place="bottom" data-image="/image/128.png">
	悬浮下方图片提示</button>
</xmp>
						</div>
						<h3 class="doc-h3" id="tips-vars">
                        参数
                    </h3>
						<p class="doc-readme">
							信息提示包含了多个参数，包含触发、位置、样式、宽、标题、图片、内容、对象和异步加载地址等。</p>
						<div class="doc-input">
							<div class="table-responsive">
								<table class="table table-bordered">
									<tr>
										<th>
											参数
										</th>
										<th>
											类型
										</th>
										<th>
											默认值
										</th>
										<th>
											可选值
										</th>
										<th>
											说明
										</th>
									</tr>
									<tr>
										<td>
											title
										</td>
										<td>
											字符串
										</td>
										<td>
											无
										</td>
										<td>
											无
										</td>
										<td>
											提示信息的标题
										</td>
									</tr>
									<tr>
										<td>
											content
										</td>
										<td>
											字符串
										</td>
										<td>
											无
										</td>
										<td>
											无
										</td>
										<td>
											提示信息的内容
										</td>
									</tr>
									<tr>
										<td rowspan="3">
											data-toggle
										</td>
										<td rowspan="3">
											字符串
										</td>
										<td rowspan="3">
											hover
										</td>
										<td>
											hover
										</td>
										<td>
											鼠标悬停时显示
										</td>
									</tr>
									<tr>
										<td>
											click
										</td>
										<td>
											鼠标点击时显示
										</td>
									</tr>
									<tr>
										<td>
											show
										</td>
										<td>
											直接显示
										</td>
									</tr>
									<tr>
										<td rowspan="4">
											data-place
										</td>
										<td rowspan="4">
											字符串
										</td>
										<td rowspan="4">
											top
										</td>
										<td>
											left
										</td>
										<td>
											显示在左边
										</td>
									</tr>
									<tr>
										<td>
											top
										</td>
										<td>
											显示在上方
										</td>
									</tr>
									<tr>
										<td>
											right
										</td>
										<td>
											显示在右侧
										</td>
									</tr>
									<tr>
										<td>
											bottom
										</td>
										<td>
											显示在下方
										</td>
									</tr>
									<tr>
										<td>
											data-style
										</td>
										<td>
											字符串
										</td>
										<td>
											无
										</td>
										<td>
											bg-(*)或border-(*)
										</td>
										<td>
											框架内的背景及边框组合使用，如：bg-main border-main
										</td>
									</tr>
									<tr>
										<td>
											data-width
										</td>
										<td>
											字符串
										</td>
										<td>
											无
										</td>
										<td>
											自定义
										</td>
										<td>
											提示信息的宽度，如：200px
										</td>
									</tr>
									<tr>
										<td>
											data-image
										</td>
										<td>
											路径
										</td>
										<td>
											无
										</td>
										<td>
											无
										</td>
										<td>
											提示图片的路径，如：/images/128.png
										</td>
									</tr>
									<tr>
										<td>
											data-target
										</td>
										<td>
											字符串
										</td>
										<td>
											无
										</td>
										<td>
											无
										</td>
										<td>
											显示对应元素的内容，如：#id或.class
										</td>
									</tr>
									<tr>
										<td>
											data-url
										</td>
										<td>
											路径
										</td>
										<td>
											无
										</td>
										<td>
											无
										</td>
										<td>
											显示对应地址的内容，如：/images/tip.html
										</td>
									</tr>
								</table>
							</div>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="alert">
                        警告框
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="alert-style">
                        基本样式
                    </h3>
						<p class="doc-readme">
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="alert">
									<span class="close rotate-hover"></span><strong>提示：</strong>请按照要求填写内容。</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="alert">
	<span class="close rotate-hover"></span><strong>提示：</strong>请按照要求填写内容。</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="alert-color">
                        颜色
                    </h3>
						<p class="doc-readme">
							警告框分为红、黄、蓝、绿四种，样式分别为：alert-red、alert-yellow、alert-blue、alert-green</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="alert alert-red">
									<span class="close rotate-hover"></span><strong>操作失败</strong>
									<p>
										请重新操作。</p>
									<button class="button bg">
										取消</button>
									<button class="button bg-red">
										确认</button>
								</div>
								<br />
								<div class="alert alert-yellow">
									<span class="close rotate-hover"></span><strong>注意：</strong>请按照要求填写内容。</div>
								<br />
								<div class="alert alert-blue">
									<span class="close rotate-hover"></span><strong>提示：</strong>请按照要求填写内容。</div>
								<br />
								<div class="alert alert-green">
									<span class="close rotate-hover"></span><strong>恭喜：</strong>操作成功。</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
	<div class="alert alert-red">
		<span class="close rotate-hover"></span><strong>操作失败</strong>
		<p>
			请重新操作。</p>
		<button class="button bg">
			取消</button>
		<button class="button bg-red">
			确认</button>
	</div>
	<div class="alert alert-yellow">
		<span class="close rotate-hover"></span><strong>注意：</strong>请按照要求填写内容。</div>
	<div class="alert alert-blue">
		<span class="close rotate-hover"></span><strong>提示：</strong>请按照要求填写内容。</div>
	<div class="alert alert-green">
		<span class="close rotate-hover"></span><strong>恭喜：</strong>操作成功。</div>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="checks">
                        单选多选
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="choice-radio">
                        单选
                    </h3>
						<p class="doc-readme">
							单选的radio效果。</p>
						<h4 class="doc-title">
                        单选
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="button-group radio">
									<label class="button active">
										<input name="pintuer" value="yes" checked="checked" type="radio">是
									</label>
									<label class="button">
										<input name="pintuer" value="no" type="radio">否
									</label>
								</div>
								<br />
								<br />
								<div class="button-group radio">
									<label class="button active">
										<input name="pintuer" value="yes" checked="checked" type="radio"><span class="icon icon-check"></span> 是
									</label>
									<label class="button">
										<input name="pintuer" value="no" type="radio"><span class="icon icon-times"></span> 否
									</label>
								</div>
								<br />
								<br />
								<div class="button-group radio">
									<label class="button active">
										<input name="pintuer" value="1" checked="checked" type="radio">起步
									</label>
									<label class="button">
										<input name="pintuer" value="2" type="radio">CSS
									</label>
									<label class="button">
										<input name="pintuer" value="3" type="radio">元件
									</label>
									<label class="button">
										<input name="pintuer" value="4" type="radio">JS组件
									</label>
									<label class="button">
										<input name="pintuer" value="5" type="radio">模块
									</label>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="button-group radio">
	<label class="button active">
		<input name="pintuer" value="yes" checked="checked" type="radio">是
	</label>
	<label class="button">
		<input name="pintuer" value="no" type="radio">否
	</label>
</div>
<div class="button-group radio">
	<label class="button active">
		<input name="pintuer" value="yes" checked="checked" type="radio"><span class="icon icon-check"></span> 是
	</label>
	<label class="button">
		<input name="pintuer" value="no" type="radio"><span class="icon icon-times"></span> 否
	</label>
</div>
<div class="button-group radio">
	<label class="button active">
		<input name="pintuer" value="1" checked="checked" type="radio">起步
	</label>
	<label class="button">
		<input name="pintuer" value="2" type="radio">CSS
	</label>
	<label class="button">
		<input name="pintuer" value="3" type="radio">元件
	</label>
	<label class="button">
		<input name="pintuer" value="4" type="radio">JS组件
	</label>
	<label class="button">
		<input name="pintuer" value="5" type="radio">模块
	</label>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="choice-checkbox">
                        多选
                    </h3>
						<p class="doc-readme">
							多选的checkbox。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="button-group checkbox">
									<label class="button active">
										<input name="pintuer" value="1" type="checkbox" checked="checked"><span class="icon icon-check"></span> 同意条款
									</label>
								</div>
								<br />
								<br />
								<div class="button-group border-main checkbox">
									<label class="button active">
										<input name="pintuer" value="1" type="checkbox" checked="checked">起步
									</label>
									<label class="button">
										<input name="pintuer" value="2" type="checkbox">CSS
									</label>
									<label class="button">
										<input name="pintuer" value="3" type="checkbox">元件
									</label>
									<label class="button">
										<input name="pintuer" value="4" type="checkbox">JS组件
									</label>
									<label class="button">
										<input name="pintuer" value="5" type="checkbox">模块
									</label>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="button-group checkbox">
	<label class="button active">
		<input name="pintuer" value="1" type="checkbox"><span class="icon icon-check"></span> 同意条款
	</label>
</div>
<div class="button-group border-main checkbox">
	<label class="button active">
		<input name="pintuer" value="1" type="checkbox" checked="checked">起步
	</label>
	<label class="button">
		<input name="pintuer" value="2" type="checkbox">CSS
	</label>
	<label class="button">
		<input name="pintuer" value="3" type="checkbox">元件
	</label>
	<label class="button">
		<input name="pintuer" value="4" type="checkbox">JS组件
	</label>
	<label class="button">
		<input name="pintuer" value="5" type="checkbox">模块
	</label>
</div>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="form">
                        表单验证
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="form-style">
                        基本样式
                    </h3>
						<p class="doc-readme">
							在表单组的基础上，使用验证方式。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form method="post" onsubmit="return false;">
									<div class="form-group">
										<div class="label">
											<label for="username">
												账号</label>
										</div>
										<div class="field">
											<input type="text" class="input" id="username" name="username" size="50" data-validate="required:必填" placeholder="手机/邮箱/账号" />
										</div>
									</div>
									<div class="form-group">
										<div class="label">
											<label for="password">
												密码</label>
										</div>
										<div class="field">
											<input type="password" class="input" id="password" name="password" size="50" data-validate="required:必填" placeholder="请输入密码" />
										</div>
									</div>
									<div class="form-button">
										<button class="button" type="submit">
											登录</button>
									</div>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form method="post" class="form form-block">
	<div class="form-group">
		<div class="label">
			<label for="username">
				账号</label>
		</div>
		<div class="field">
			<input type="text" class="input" id="username" name="username" size="50" data-validate="required:必填" placeholder="手机/邮箱/账号" />
		</div>
	</div>
	<div class="form-group">
		<div class="label">
			<label for="password">
				密码</label>
		</div>
		<div class="field">
			<input type="password" class="input" id="password" name="password" size="50" data-validate="required:必填" placeholder="请输入密码" />
		</div>
	</div>
	<div class="form-button">
		<button class="button" type="submit">
			登录</button>
	</div>
</form>
</xmp>
						</div>
						<h4 class="doc-title">
                        验证结果状态
                    </h4>
						<div class="doc-input">
							验证包含验证失败、通过验证两种状态，对应红和绿两种色彩提示。</div>
						<div class="panel doc-demo ">
							<div class="panel-head doc-ad0">
								<strong>示例</strong>
							</div>
							<div class="panel-body">
								<form method="post" class="form form-block">
									<div class="form-group check-error">
										<div class="label">
											<label for="error">
												验证失败</label>
										</div>
										<div class="field">
											<input type="text" class="input" id="error" name="error" size="50" placeholder="验证失败状态" />
										</div>
									</div>
									<div class="form-group check-success">
										<div class="label">
											<label for="success">
												验证通过</label>
										</div>
										<div class="field">
											<input type="text" class="input" id="success" name="success" size="50" placeholder="验证通过状态" />
										</div>
									</div>
								</form>
							</div>
						</div>
						<h3 class="doc-h3" id="form-check">
                        验证方法
                    </h3>
						<p class="doc-readme">
							文本框、文件域、单选框、复选框及下拉菜单等控制的验证方法。</p>
						<h4 class="doc-title">
                        单行及多行文本框
                    </h4>
						<div class="doc-input">
							给文本框添加data-validate属性，属性值为相关的验证规则。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form method="post" onsubmit="return false;">
									<div class="form-group">
										<div class="label">
											<label for="username">
												姓名</label>
										</div>
										<div class="field">
											<input type="text" class="input" id="username" name="username" size="50" data-validate="required:必填" placeholder="手机/邮箱/账号" />
										</div>
									</div>
									<div class="form-group">
										<div class="label">
											<label for="detail">
												介绍</label>
										</div>
										<div class="field">
											<textarea class="input" id="detail" name="detail" placeholder="请介绍一下自己" data-validate="required:必填"></textarea>
										</div>
									</div>
									<div class="form-button">
										<button class="button" type="submit">
											提交</button>
									</div>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form method="post">
	<div class="form-group">
		<div class="label">
			<label for="username">
				姓名</label>
		</div>
		<div class="field">
			<input type="text" class="input" id="username" name="username" size="30" data-validate="required:必填" placeholder="手机/邮箱/账号" />
		</div>
	</div>
	<div class="form-group">
		<div class="label">
			<label for="detail">
				介绍</label>
		</div>
		<div class="field">
			<textarea class="input" id="detail" name="detail" placeholder="请介绍一下自己" data-validate="required:必填"></textarea>
		</div>
	</div>
	<div class="form-button">
		<button class="button" type="submit">
			提交</button>
	</div>
</form>
</xmp>
						</div>
						<h4 class="doc-title">
                        文件域验证
                    </h4>
						<div class="doc-input">
							方法与文本框一样，文件域添加data-validate属性，并填写验证的规则。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form onsubmit="return false;">
									<div class="form-group">
										<div class="label">
											<label for="upfile">
												文件浏览</label>
										</div>
										<div class="field">
											<a class="button input-file" href="javascript:void(0);">+ 请选择上传文件
                                        <input size="100" data-validate="required:请选择文件,regexp#.+.(jpg|jpeg|png|gif)$:只能上传jpg|gif|png格式文件"
                                            type="file" />
                                    </a>
										</div>
									</div>
									<div class="form-button">
										<button class="button" type="submit">
											提交</button>
									</div>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<div class="form-group">
		<div class="label">
			<label for="upfile">
				文件浏览</label>
		</div>
		<div class="field">
			<a class="button input-file" href="javascript:void(0);">+ 请选择上传文件
        <input size="100" data-validate="required:请选择文件,regexp#.+.(jpg|jpeg|png|gif)$:只能上传jpg|gif|png格式文件"
            type="file" />
    </a>
		</div>
	</div>
	<div class="form-button">
		<button class="button" type="submit">
			提交</button>
	</div>
</form>
</xmp>
						</div>
						<h4 class="doc-title">
                        单选框
                    </h4>
						<div class="doc-input">
							单选框判断是否选择，对应的单选框，至少有一个添加：data-validate="radio:..."。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form onsubmit="return false;">
									<div class="form-group">
										<div class="label">
											<strong>拼图</strong>
										</div>
										<div class="field label-block">
											<label>
												<input name="pintuer" type="radio" data-validate="radio:请选择">起步
											</label>
											<label>
												<input name="pintuer" type="radio" data-validate="radio:请选择">CSS
											</label>
											<label>
												<input name="pintuer" type="radio" data-validate="radio:请选择">元件
											</label>
											<label>
												<input name="pintuer" type="radio" data-validate="radio:请选择">动画
											</label>
											<label>
												<input name="pintuer" type="radio" data-validate="radio:请选择">js组件
											</label>
											<label>
												<input name="pintuer" type="radio" data-validate="radio:请选择">模块
											</label>
										</div>
									</div>
									<div class="form-button">
										<button class="button" type="submit">
											提交</button>
									</div>
								</form>
								<br />
								<form onsubmit="return false;">
									<div class="form-group">
										<div class="label">
											<strong>拼图</strong>
										</div>
										<div class="field">
											<div class="button-group radio">
												<label class="button">
													<input name="pintuer" value="1" type="radio" data-validate="radio:请选择">起步
												</label>
												<label class="button">
													<input name="pintuer" value="2" type="radio" data-validate="radio:请选择">CSS
												</label>
												<label class="button">
													<input name="pintuer" value="3" type="radio" data-validate="radio:请选择">元件
												</label>
												<label class="button">
													<input name="pintuer" value="4" type="radio" data-validate="radio:请选择">JS组件
												</label>
												<label class="button">
													<input name="pintuer" value="5" type="radio" data-validate="radio:请选择">模块
												</label>
											</div>
										</div>
									</div>
									<div class="form-button">
										<button class="button" type="submit">
											提交</button>
									</div>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<div class="form-group">
		<div class="label">
			<strong>拼图</strong>
		</div>
		<div class="field label-block">
			<label>
				<input name="pintuer" type="radio" data-validate="radio:请选择">起步
			</label>
			...
		</div>
	</div>
	<div class="form-button">
		<button class="button" type="submit">
			提交</button>
	</div>
</form>
<form>
	<div class="form-group">
		<div class="label">
			<strong>拼图</strong>
		</div>
		<div class="field">
			<div class="button-group radio">
				<label class="button">
					<input name="pintuer" value="1" type="radio" data-validate="radio:请选择">起步
				</label>
				...
			</div>
		</div>
	</div>
	<div class="form-button">
		<button class="button" type="submit">
			提交</button>
	</div>
</form>
</xmp>
						</div>
						<h4 class="doc-title">
                        复选框
                    </h4>
						<div class="doc-input">
							多个复选框时须为每个选项添加验证属性。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form onsubmit="return false;">
									<div class="form-group">
										<div class="label">
											<strong>拼图</strong>
										</div>
										<div class="field label-block">
											<label>
												<input name="pintuer" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">起步
											</label>
											<label>
												<input name="pintuer" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">CSS
											</label>
											<label>
												<input name="pintuer" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">元件
											</label>
											<label>
												<input name="pintuer" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">动画
											</label>
											<label>
												<input name="pintuer" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">js组件
											</label>
											<label>
												<input name="pintuer" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">模块
											</label>
										</div>
									</div>
									<div class="form-button">
										<button class="button" type="submit">
											提交</button>
									</div>
								</form>
								<br />
								<br />
								<form onsubmit="return false;">
									<div class="form-group">
										<div class="label">
											<strong>拼图</strong>
										</div>
										<div class="field label-block">
											<div class="button-group checkbox">
												<label class="button">
													<input name="pintuer" value="1" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">起步
												</label>
												<label class="button">
													<input name="pintuer" value="2" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">CSS
												</label>
												<label class="button">
													<input name="pintuer" value="3" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">元件
												</label>
												<label class="button">
													<input name="pintuer" value="4" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">JS组件
												</label>
												<label class="button">
													<input name="pintuer" value="5" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">模块
												</label>
											</div>
										</div>
									</div>
									<div class="form-button">
										<button class="button" type="submit">
											提交</button>
									</div>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<div class="form-group">
		<div class="label">
			<strong>拼图</strong>
		</div>
		<div class="field label-block">
			<label>
				<input name="pintuer" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">起步
			</label>
			...
		</div>
	</div>
	<div class="form-button">
		<button class="button" type="submit">
			提交</button>
	</div>
</form>
<form>
	<div class="form-group">
		<div class="label">
			<strong>拼图</strong>
		</div>
		<div class="field">
			<div class="button-group checkbox">
				<label class="button">
					<input name="pintuer" value="1" type="checkbox" data-validate="required:请选择,length#>=2:至少选择2项">起步
				</label>
				...
			</div>
		</div>
	</div>
	<div class="form-button">
		<button class="button" type="submit">
			提交</button>
	</div>
</form>
</xmp>
						</div>
						<h4 class="doc-title">
                        下拉菜单
                    </h4>
						<div class="doc-input">
							验证下拉菜单是否选值，只需要添加：data-validate="required:..."</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form onsubmit="return false;">
									<div class="form-group">
										<div class="label">
											<label for="pintuer">
												拼图</label>
										</div>
										<div class="field">
											<select class="input" name="pintuer" id="pintuer" data-validate="required:请选择拼图内容">
												<option value="">请选择</option>
												<option value="start">起步</option>
												<option value="css">CSS</option>
												<option value="units">元件</option>
											</select>
										</div>
									</div>
									<div class="form-button">
										<button class="button" type="submit">
											提交</button>
									</div>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form>
	<div class="form-group">
		<div class="label">
			<label for="pintuer">
				拼图</label>
		</div>
		<div class="field">
			<select class="input" name="pintuer" id="pintuer" data-validate="required:请选择拼图内容">
				<option value="">请选择</option>
				...
			</select>
		</div>
	</div>
	<div class="form-button">
		<button class="button" type="submit">
			提交</button>
	</div>
</form>
</xmp>
						</div>
						<h3 class="doc-h3" id="form-tips">
                        验证信息显示方式
                    </h3>
						<p class="doc-readme">
							给form添加.form-tips样式，可改变验证信息的显示方式。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form method="post" class="form-tips" onsubmit="return false;">
									<div class="form-group">
										<div class="label">
											<label for="username">
												账号</label>
										</div>
										<div class="field">
											<input type="text" class="input" id="username" name="username" size="50" data-validate="required:必填" placeholder="手机/邮箱/账号" />
										</div>
									</div>
									<div class="form-group">
										<div class="label">
											<label for="password">
												密码</label>
										</div>
										<div class="field">
											<input type="password" class="input" id="password" name="password" size="50" data-validate="required:必填" placeholder="请输入密码" />
										</div>
									</div>
									<div class="form-button">
										<button class="button" type="submit">
											登录</button>
									</div>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form method="post" class="form-tips">
	...</form>
</xmp>
						</div>
						<h4 class="doc-title">
                        重设
                    </h4>
						<div class="doc-input">
							给表单添加重设按钮，并加上.form-reset样式，可清除表单的验证状态。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form method="post" onsubmit="return false;">
									<div class="form-group">
										<div class="label">
											<label for="username">
												账号</label>
										</div>
										<div class="field">
											<input type="text" class="input" id="username" name="username" size="50" data-validate="required:必填" placeholder="手机/邮箱/账号" />
										</div>
									</div>
									<div class="form-group">
										<div class="label">
											<label for="password">
												密码</label>
										</div>
										<div class="field">
											<input type="password" class="input" id="password" name="password" size="50" data-validate="required:必填" placeholder="请输入密码" />
										</div>
									</div>
									<div class="form-button">
										<button class="button" type="submit">
											登录</button>
										<button class="button bg-yellow form-reset" type="reset">
											重设</button>
									</div>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form method="post">
	...
	<button class="form-reset" type="reset">
		重设</button>
</form>
</xmp>
						</div>
						<h3 class="doc-h3" id="form-checks">
                        叠加验证
                    </h3>
						<p class="doc-readme">
							对于输入的值，需要多重验证，才能确保数据正确，比如用户的年龄，验证是否填写的同时，还需要验证是否数字，同时还要限制在0-150之间；拼图前端框架提供强大的组合验证功能，多个验证用","号分开，让验证灵活而又准确。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form method="post" onsubmit="return false;">
									<div class="form-group">
										<div class="label">
											<label for="age">
												年龄</label>
										</div>
										<div class="field">
											<input type="text" class="input" id="age" name="age" size="50" data-validate="required:必填,number:年龄只能填写数字,compare#<150:年龄介于0-150之间" placeholder="请输入您的年龄" />
										</div>
									</div>
									<div class="form-button">
										<button class="button" type="submit">
											提交</button>
									</div>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form method="post" class="form form-block">
	<div class="form-group">
		<div class="label">
			<label for="age">
				年龄</label>
		</div>
		<div class="field">
			<input type="text" class="input" id="age" name="age" size="50" data-validate="required:必填,number:年龄只能填写数字,compare#<150:年龄介于0-150之间" placeholder="请输入您的年龄" />
		</div>
	</div>
	<div class="form-button">
		<button class="button" type="submit">
			提交</button>
	</div>
</form>
</xmp>
						</div>
						<h3 class="doc-h3" id="form-ajax">
                        ajax请求前验证<span class="badge bg-yellow">新增</span>
                    </h3>
						<p class="doc-readme">
							对于使用ajax请求方式提交表单信息，在此之前需要验证，直接调用此方法。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<form method="post" onsubmit="return false;" id="ajaxForm">
									<div class="form-group">
										<div class="label">
											<label for="age">
												年龄</label>
										</div>
										<div class="field">
											<input type="text" class="input" id="age" name="age" size="50" data-validate="required:必填,number:年龄只能填写数字,compare#<150:年龄介于0-150之间" placeholder="请输入您的年龄" />
										</div>
									</div>
									<div class="form-button">
										<button class="button" type="button" id="btnAjaxSubmit">
											提交</button>
									</div>
									<script>
										$(function() {
											$("#btnAjaxSubmit").click(function() {
												$("#ajaxForm").ajaxSubmit(function() {
													alert('在没有成功验证前你是看不到我滴...');
												});
											});
										});
									</script>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<form method="post" onsubmit="return false;" id="ajaxForm">
	<div class="form-group">
		<div class="label">
			<label for="age">
				年龄</label>
		</div>
		<div class="field">
			<input type="text" class="input" id="age" name="age" size="50" data-validate="required:必填,number:年龄只能填写数字,compare#<150:年龄介于0-150之间" placeholder="请输入您的年龄" />
		</div>
	</div>
	<div class="form-button">
		<button class="button" type="button" id="btnAjaxSubmit">
			提交</button>
	</div>
	<script>
		$(function() {
			$("#btnAjaxSubmit").click(function() {
				$("#ajaxForm").ajaxSubmit(function() {
					alert('在没有成功验证前你是看不到我滴...');
				});
			});
		});
	</script>
</form>
</xmp>
						</div>
						<h3 class="doc-h3" id="form-vars">
                        验证参数
                    </h3>
						<p class="doc-readme">
							拼图提供了多种预设参数及方法供使用，具体参数对应下表使用。</p>
						<h4 class="doc-title">
                        直接验证
                    </h4>
						<div class="doc-input">
							使用方法为：data-validate="参数(required):错误提示(不为空)"</div>
						<div class="doc-input">
							<div class="table-responsive">
								<table class="table table-bordered">
									<tr>
										<th>
											参数
										</th>
										<th>
											说明
										</th>
									</tr>
									<tr>
										<td>
											required
										</td>
										<td>
											不为空
										</td>
									</tr>
									<tr>
										<td>
											chinese
										</td>
										<td>
											纯汉字
										</td>
									</tr>
									<tr>
										<td>
											number
										</td>
										<td>
											纯数字
										</td>
									</tr>
									<tr>
										<td>
											integer
										</td>
										<td>
											正负整数
										</td>
									</tr>
									<tr>
										<td>
											plusinteger
										</td>
										<td>
											正整数
										</td>
									</tr>
									<tr>
										<td>
											double
										</td>
										<td>
											正负小数
										</td>
									</tr>
									<tr>
										<td>
											plusdouble
										</td>
										<td>
											正小数
										</td>
									</tr>
									<tr>
										<td>
											english
										</td>
										<td>
											英文字符
										</td>
									</tr>
									<tr>
										<td>
											username
										</td>
										<td>
											英文字母开头的字母、下划线、数字
										</td>
									</tr>
									<tr>
										<td>
											mobile
										</td>
										<td>
											手机号码
										</td>
									</tr>
									<tr>
										<td>
											phone
										</td>
										<td>
											电话
										</td>
									</tr>
									<tr>
										<td>
											tel
										</td>
										<td>
											手机号码或者电话
										</td>
									</tr>
									<tr>
										<td>
											email
										</td>
										<td>
											电子邮箱
										</td>
									</tr>
									<tr>
										<td>
											url
										</td>
										<td>
											网址
										</td>
									</tr>
									<tr>
										<td>
											ip
										</td>
										<td>
											IP地址
										</td>
									</tr>
									<tr>
										<td>
											currency
										</td>
										<td>
											货币
										</td>
									</tr>
									<tr>
										<td>
											zip
										</td>
										<td>
											邮编
										</td>
									</tr>
									<tr>
										<td>
											qq
										</td>
										<td>
											QQ号
										</td>
									</tr>
									<tr>
										<td>
											radio
										</td>
										<td>
											单选框是否选择
										</td>
									</tr>
								</table>
							</div>
						</div>
						<h4 class="doc-title">
                        对比验证
                    </h4>
						<div class="doc-input">
							包含数值对比、长度对比，使用方法为：data-validate="参数(compare或length)#对比值(>10):错误提示(请输入大于10的数字)"。</div>
						<div class="doc-input">
							<div class="table-responsive">
								<table class="table table-bordered">
									<tr>
										<th>
											类型
										</th>
										<th>
											参数
										</th>
										<th>
											运算符
										</th>
										<th>
											描述
										</th>
										<th>
											示例
										</th>
									</tr>
									<tr>
										<td rowspan="3">
											数值对比
										</td>
										<td rowspan="3">
											compare
										</td>
										<td>
											==
										</td>
										<td>
											等于
										</td>
										<td>
											compare#==10:等于10，length#==10:字符长度为10
										</td>
									</tr>
									<tr>
										<td>
											!=
										</td>
										<td>
											不等于
										</td>
										<td>
											compare#!=10:不等于10，length#!=10:字符长度不为10
										</td>
									</tr>
									<tr>
										<td>
											>
										</td>
										<td>
											大于
										</td>
										<td>
											compare#>10:数值须大于10，length#>10:字符长度大于10位
										</td>
									</tr>
									<tr>
										<td rowspan="3">
											字符长度对比
										</td>
										<td rowspan="3">
											length
										</td>
										<td>
											< </td>
												<td>
													小于
												</td>
												<td>
													compare#
													<10:数值须小于10，length#<10:字符长度小于10位 </td>
									</tr>
									<tr>
										<td>
											>=
										</td>
										<td>
											大于等于
										</td>
										<td>
											compare#>=10:数值须大于或等于10，length#>=10:字符长度大于或等于10位
										</td>
									</tr>
									<tr>
										<td>
											<=< /td>
												<td>
													小于等于
												</td>
												<td>
													compare#
													<=10:数值须小于或等于10，length#<=10:字符长度小于或等于10位 </td>
									</tr>
								</table>
							</div>
						</div>
						<h4 class="doc-title">
                        比较验证
                    </h4>
						<div class="doc-input">
							<div class="table-responsive">
								<table class="table table-bordered">
									<tr>
										<th>
											类型
										</th>
										<th>
											参数
										</th>
										<th>
											使用方法
										</th>
										<th>
											说明
										</th>
									</tr>
									<tr>
										<td>
											正则表达式
										</td>
										<td>
											regexp
										</td>
										<td>
											参数(regexp)#正则表达式(.+.(jpg|gif)$):错误提示(图片格式为jpg,gif)
										</td>
										<td>
											输入的值是否符合正则表达式的规则。
										</td>
									</tr>
									<tr>
										<td>
											重复密码
										</td>
										<td>
											repeat
										</td>
										<td>
											参数(repeat)#比较对象(password):错误提示(两次输入的密码不一致)
										</td>
										<td>
											当前密码与name="passwrod"的进行比较，看是否相同。
										</td>
									</tr>
									<tr>
										<td>
											异步验证
										</td>
										<td>
											ajax
										</td>
										<td>
											参数(ajax)#验证地址(demo/getdata.html?username={value}):错误提示(用户已注册)
										</td>
										<td>
											<ul>
												<li>验证地址须带参数，最后一个值为当前输入框的值；</li>
												<li>异步返回结果为{"getdata":"true"}时通过验证，其他则为不通过。</li>
											</ul>
										</td>
									</tr>
								</table>
							</div>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="carousel">
                        轮播
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="carousel-demo">
                        轮播案例
                    </h3>
						<p class="doc-readme">
							基本的轮播效果，通常用于广告图或横幅效果等。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="banner">
									<div class="carousel">
										<div class="item">
											<div class="doc-carousel">
												轮播一</div>
										</div>
										<div class="item">
											<div class="doc-carousel">
												轮播二</div>
										</div>
										<div class="item">
											<div class="doc-carousel">
												轮播三</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="banner">
	<div class="carousel">
		<div class="item">
			...</div>
		<div class="item">
			...</div>
		<div class="item">
			...</div>
	</div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="carousel-option">
                        可选内容
                    </h3>
						<p class="doc-readme">
							在设置不同参数下的轮播效果示例。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="banner" data-pointer="1" data-interval="6" data-item="2" data-small="3" data-middle="4" data-big="5" data-style="border-red">
									<ul class="carousel">
										<li class="item">
											<div class="doc-carousel">
												轮播一</div>
										</li>
										<li class="item">
											<div class="doc-carousel">
												轮播二</div>
										</li>
										<li class="item">
											<div class="doc-carousel">
												轮播三</div>
										</li>
										<li class="item">
											<div class="doc-carousel">
												轮播四</div>
										</li>
										<li class="item">
											<div class="doc-carousel">
												轮播五</div>
										</li>
										<li class="item">
											<div class="doc-carousel">
												轮播六</div>
										</li>
										<li class="item">
											<div class="doc-carousel">
												轮播七</div>
										</li>
										<li class="item">
											<div class="doc-carousel">
												轮播八</div>
										</li>
										<li class="item">
											<div class="doc-carousel">
												轮播九</div>
										</li>
										<li class="item">
											<div class="doc-carousel">
												轮播十</div>
										</li>
										<li class="item">
											<div class="doc-carousel">
												轮播十一</div>
										</li>
										<li class="item">
											<div class="doc-carousel">
												轮播十二</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="banner" data-pointer="1" data-interval="6" data-item="2" data-small="3" data-middle="4" data-big="5" data-style="border-red">
	<ul class="carousel">
		<li class="item">...</li>...
	</ul>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="carousel-vars">
                        参数
                    </h3>
						<p class="doc-readme">
							轮播参数包含显示分页、间隔时间，响应式显示数目等。</p>
						<div class="doc-input">
							<div class="table-responsive">
								<table class="table table-bordered">
									<tr>
										<th>
											参数
										</th>
										<th>
											类型
										</th>
										<th>
											默认值
										</th>
										<th>
											可选值
										</th>
										<th>
											说明
										</th>
									</tr>
									<tr>
										<td rowspan="2">
											data-pointer
										</td>
										<td rowspan="2">
											布尔值
										</td>
										<td rowspan="2">
											1
										</td>
										<td>
											1
										</td>
										<td>
											显示点式分页
										</td>
									</tr>
									<tr>
										<td>
											0
										</td>
										<td>
											不显示
										</td>
									</tr>
									<tr>
										<td>
											data-style
										</td>
										<td>
											字符串
										</td>
										<td>
											空
										</td>
										<td>
											border-(*)
										</td>
										<td>
											点式分页的边框色，如border-main
										</td>
									</tr>
									<tr>
										<td>
											data-interval
										</td>
										<td>
											正整数
										</td>
										<td>
											5
										</td>
										<td>
											任意正整数
										</td>
										<td>
											轮播间隔时间
										</td>
									</tr>
									<tr>
										<td>
											data-item
										</td>
										<td>
											正整数
										</td>
										<td>
											1
										</td>
										<td>
											任意正整数
										</td>
										<td>
											(可选)一屏内显示的数量
										</td>
									</tr>
									<tr>
										<td>
											data-small
										</td>
										<td>
											正整数
										</td>
										<td>
											空
										</td>
										<td>
											任意正整数
										</td>
										<td>
											(可选)小屏内显示的数量
										</td>
									</tr>
									<tr>
										<td>
											data-middle
										</td>
										<td>
											正整数
										</td>
										<td>
											空
										</td>
										<td>
											任意正整数
										</td>
										<td>
											(可选)中屏内显示的数量
										</td>
									</tr>
									<tr>
										<td>
											data-big
										</td>
										<td>
											正整数
										</td>
										<td>
											空
										</td>
										<td>
											任意正整数
										</td>
										<td>
											(可选)大屏内显示的数量
										</td>
									</tr>
								</table>
							</div>
						</div>
						<blockquote class="quote border-yellow doc-quoteyellow">
							<strong>响应式设置</strong> 默认及移动设备的情况下，显示的数量使用data-item值，当小屏下使用则为data-small数值，中屏及大屏分别使用data-middle及data-big的数值，使得轮播显示可在不同的设备下响应显示。</blockquote>
						<br />
						<br />
						<h2 class="doc-h2" id="fixed">
                        置顶或置底
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="fixed-demo">
                        基本案例
                    </h3>
						<p class="doc-readme">
							当页面滚动时，元素超过窗口顶部(底部)时，会固定显示在顶部(底部)。</p>
						<div class="panel doc-demo ">
							<div class="panel-head doc-ad0">
								<strong>示例</strong>
							</div>
							<div class="panel-body">
								<div class="fixed padding bg-yellow bg-inverse doc-fixed-top" data-offset-fixed="520">
									别离开我，我要回去。</div>
								<br />
								<div class="fixed padding bg-blue bg-inverse doc-fixed-bottom" data-style="fixed-bottom" data-offset-fixed="300">
									我先在底部呆着，到站了才回去。</div>
							</div>
						</div>
						<h3 class="doc-h3" id="fixed-use">
                        使用方法
                    </h3>
						<p class="doc-readme">
							在需要置顶或置底的元素上添加.fixed样式，默认为置顶，当设置data-style属性值为fixed-bottom时，则为置底。</p>
						<div class="doc-code">
<xmp>
<div class="fixed">
	...</div>
<div class="fixed" data-style="fixed-bottom" data-offset-fixed="10">
	...</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="fixed-vars">
                        参数
                    </h3>
						<p class="doc-readme">
							置顶或置底参数包含置顶样式data-style和偏离值data-offset-fixed</p>
						<div class="doc-input">
							<div class="table-responsive">
								<table class="table table-bordered">
									<tr>
										<th>
											参数
										</th>
										<th>
											类型
										</th>
										<th>
											默认值
										</th>
										<th>
											可选值
										</th>
										<th>
											说明
										</th>
									</tr>
									<tr>
										<td rowspan="2">
											data-style
										</td>
										<td rowspan="2">
											字符串
										</td>
										<td rowspan="2">
											fixed-top
										</td>
										<td>
											fixed-top
										</td>
										<td>
											元素置顶，如：data-style="fixed-top"
										</td>
									</tr>
									<tr>
										<td>
											fixed-bottom
										</td>
										<td>
											元素置底，如：data-style="fixed-bottom"
										</td>
									</tr>
									<tr>
										<td>
											data-offset-fixed
										</td>
										<td>
											整数
										</td>
										<td>
											0
										</td>
										<td>
											无
										</td>
										<td>
											偏离的高底值，如data-offset-fixed="10"，单位为px。
										</td>
									</tr>
								</table>
							</div>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="spy">
                        滚动监听
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="spy-demo">
                        基本案例
                    </h3>
						<p class="doc-readme">
							当内容滚动时，导航条状态会对应改变。</p>
						<div class="panel doc-demo ">
							<div class="panel-head doc-ad0">
								<strong>示例</strong>
							</div>
							<div class="panel-body">
								<button class="button icon-navicon" data-target="#nav-spy">
								</button>
								<div class="bg-blue bg-inverse radius">
									<ul class="nav nav-inline nav-menu nav-navicon spy clearfix" id="nav-spy" data-target="#spy-content" data-offset-spy="10">
										<li class="nav-head">拼图前端框架</li>
										<li><a href="#spy1">拼图介绍</a> </li>
										<li><a href="#spy2">拼图应用</a> </li>
										<li><a href="#spy3">功能特色<span class="arrow"></span></a>
											<ul class="drop-menu">
												<li><a href="#spy4">移动优先、跨屏响应</a> </li>
												<li><a href="#spy5">组件丰富、海量插件</a> </li>
												<li><a href="#spy6">轻量高效、国产开源</a> </li>
											</ul>
										</li>
									</ul>
								</div>
								<br />
								<div class="doc-spy-content" id="spy-content">
									<br />
									<h3 id="spy1">
                                    拼图介绍
                                </h3>
									<br />
									<p>
										国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。</p>
									<h3 id="spy2">
                                    拼图应用
                                </h3>
									<br />
									<p>
										拼图前端框架在传统CSS框架的基本上，增加了HTML5、CSS3、JS等技术组合应用，应用最新的浏览器技术，同时兼容较早的浏览器，新旧结合，承前启后，开发者只需把框架文件引入到项目中，就可以初现快速的共同开发，改变以往建立PC网站同时，再建立手机网站的局面，实现一站响应所有设备，大大提高了开发效率。</p>
									<h3 id="spy3">
                                    功能特色
                                </h3>
									<br />
									<h4 id="spy4">
                                    移动优先、跨屏响应
                                </h4>
									<br />
									<p>
										拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应，兼容桌面浏览器的同时，更适应了移动互联网的潮流。</p>
									<h4 id="spy5">
                                    组件丰富、海量插件
                                </h4>
									<br />
									<p>
										拼图前端框架重新定义了CSS基础、常用元件及JS组件，可快速构架前端界面，实现跨屏响应。同时兼容所有jQuery插件，在项目中可以灵活使用，让前端开发如虎添翼。</p>
									<h4 id="spy6">
                                    轻量高效、国产开源
                                </h4>
									<br />
									<p>
										拼图基于应用广泛jQuery插件，轻量高效；相对于国外的前端框架，拼图前端框架侧重于对中文的支持，符合国人的视觉及体验，实现到国内主流浏览器的支持，减少兼容性测试时间，提高开发效率。</p>
								</div>
							</div>
						</div>
						<h3 class="doc-h3" id="spy-skills">
                        使用方法
                    </h3>
						<p class="doc-readme">
							首先在监听状态元素上添加.spy样式；同时设置监听的对象属性data-target，当为空为窗口滚动；也可设置滚动的偏离值data-offset-spy，单位为px。</p>
						<div class="doc-code">
<xmp>
<ul class="nav nav-sub bg-main bg-inverse radius spy" data-target=".spy-content" data-offset-spy="10">
	<li class="active"><a href="#spy1">...</a> </li>
	...
</ul>
<div class="spy-content">
	<h4 id="spy1">
    ...</h4> ...
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="spy-vars">
                        参数
                    </h3>
						<p class="doc-readme">
							滚动监听包含监听对象(data-target)和垂直偏离(data-offset-spy)两个值。</p>
						<div class="doc-input">
							<div class="table-responsive">
								<table class="table table-bordered">
									<tr>
										<th>
											参数
										</th>
										<th>
											类型
										</th>
										<th>
											默认值
										</th>
										<th>
											可选值
										</th>
										<th>
											说明
										</th>
									</tr>
									<tr>
										<td>
											data-target
										</td>
										<td>
											字符串
										</td>
										<td>
											window
										</td>
										<td>
											无
										</td>
										<td>
											监听对象，如：data-target="#id"或data-target=".class"
										</td>
									</tr>
									<tr>
										<td>
											data-offset-spy
										</td>
										<td>
											整数
										</td>
										<td>
											0
										</td>
										<td>
											无
										</td>
										<td>
											垂直偏离，如data-offset-spy="10"，单位为px。
										</td>
									</tr>
								</table>
							</div>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="collapse">
                        折叠
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="collapse-demo">
                        基本案例
                    </h3>
						<p class="doc-readme">
							基本案例</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="collapse">
									<div class="panel active">
										<div class="panel-head">
											<h4>
                                            拼图前端框架
                                        </h4>
										</div>
										<div class="panel-body" id="first">
											拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div>
									</div>
									<div class="panel">
										<div class="panel-head">
											<h4>
                                            拼图前端框架
                                        </h4>
										</div>
										<div class="panel-body" id="second">
											拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div>
									</div>
									<div class="panel">
										<div class="panel-head">
											<h4>
                                            拼图前端框架
                                        </h4>
										</div>
										<div class="panel-body" id="third">
											拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="collapse">
	<div class="panel active">
		<div class="panel-head">
			<h4>
            ...</h4>
		</div>
		<div class="panel-body">
			...</div>
	</div>
	<div class="panel">
		<div class="panel-head">
			<h4>
            ...</h4>
		</div>
		<div class="panel-body">
			...</div>
	</div>
	<div class="panel">
		<div class="panel-head">
			<h4>
            ...</h4>
		</div>
		<div class="panel-body">
			...</div>
	</div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="collapse-use">
                        使用方法
                    </h3>
						<p class="doc-readme">
							给元素添加.collapse样式，并给当前显示的子类，添加.actvie样式。</p>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="collapse-demo">
                        反复折叠案例
                    </h3>
						<p class="doc-readme">
							反复折叠案例<span class="badge bg-yellow">新增</span></p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="collapse-toggle">
									<div class="panel toggle-actvie">
										<div class="panel-head">
											<h4>
                                            拼图前端框架
                                        </h4>
										</div>
										<div class="panel-body" id="first">
											拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div>
									</div>
									<div class="panel">
										<div class="panel-head">
											<h4>
                                            拼图前端框架
                                        </h4>
										</div>
										<div class="panel-body" id="second">
											拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div>
									</div>
									<div class="panel">
										<div class="panel-head">
											<h4>
                                            拼图前端框架
                                        </h4>
										</div>
										<div class="panel-body" id="third">
											拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="collapse-toggle">
	<div class="panel">
		<div class="panel-head">
			<h4>
            ...</h4>
		</div>
		<div class="panel-body">
			...</div>
	</div>
	<div class="panel">
		<div class="panel-head">
			<h4>
            ...</h4>
		</div>
		<div class="panel-body">
			...</div>
	</div>
	<div class="panel">
		<div class="panel-head">
			<h4>
            ...</h4>
		</div>
		<div class="panel-body">
			...</div>
	</div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="collapse-use">
                        	使用方法
                    	</h3>
						<p class="doc-readme">
							给元素添加.collapse-toggle样式，并给当前显示的子类，添加.active样式。</p>
						<br />
						<br />
					</div>
					<!--list.end-->
				</div>
				<div class="hidden-l hidden-s xm3 xb3">
					<div class="sidebar doc-sidebar fadein-left">
						<ul class="sidenav nav spy fixed" data-offset-fixed="270" data-offset-spy="160">
							<li><a href="#overview">概述</a>
								<ul>
								</ul>
							</li>
							<li><a href="#win">窗口工具</a>
								<ul>
									<li><a href="#home-favorite">设为首页，加入收藏</a> </li>
									<li><a href="#forward-back-backtop">前进后退及返回顶部</a> </li>
									<li><a href="#refresh-print-close">刷新，打印，关闭窗口</a> </li>
								</ul>
							</li>
							<li><a href="#tabs">选项标签</a>
								<ul>
									<li><a href="#tab-style">标签样式</a> </li>
									<li><a href="#tab-border-color">边框颜色</a> </li>
									<li><a href="#tab-vars">参数</a> </li>
								</ul>
							</li>
							<li><a href="#dialog">对话框</a>
								<ul>
									<li><a href="#dialog-style">基本样式</a> </li>
									<li><a href="#dialog-click">点击弹出</a> </li>
									<li><a href="#dialog-vars">参数</a> </li>
								</ul>
							</li>
							<li><a href="#tips">提示</a>
								<ul>
									<li><a href="#tips-style">基本案例</a> </li>
									<li><a href="#tips-use">使用方法</a> </li>
									<li><a href="#tips-vars">参数</a> </li>
								</ul>
							</li>
							<li><a href="#alert">警告框</a>
								<ul>
									<li><a href="#alert-style">基本样式</a> </li>
									<li><a href="#alert-color">颜色</a> </li>
								</ul>
							</li>
							<li><a href="#checks">单选多选</a>
								<ul>
									<li><a href="#choice-radio">单选</a> </li>
									<li><a href="#choice-checkbox">多选</a> </li>
								</ul>
							</li>
							<li><a href="#form">表单验证</a>
								<ul>
									<li><a href="#form-style">基本样式</a> </li>
									<li><a href="#form-check">验证方法</a> </li>
									<li><a href="#form-tips">验证信息显示方式</a> </li>
									<li><a href="#form-checks">叠加验证</a> </li>
									<li><a href="#form-ajax">Ajax请求前验证</a> </li>
									<li><a href="#form-vars">验证参数</a> </li>
								</ul>
							</li>
							<li><a href="#carousel">轮播</a>
								<ul>
									<li><a href="#carousel-demo">轮播案例</a> </li>
									<li><a href="#carousel-option">可选内容</a> </li>
									<li><a href="#carousel-vars">参数</a> </li>
								</ul>
							</li>
							<li><a href="#fixed">置顶或置底</a>
								<ul>
									<li><a href="#fixed-demo">基本案例</a> </li>
									<li><a href="#fixed-use">使用方法</a> </li>
									<li><a href="#fixed-vars">参数</a> </li>
								</ul>
							</li>
							<li><a href="#spy">滚动监听</a>
								<ul>
									<li><a href="#spy-demo">基本案例</a> </li>
									<li><a href="#spy-skills">使用方法</a> </li>
									<li><a href="#spy-vars">参数</a> </li>
								</ul>
							</li>
							<li><a href="#collapse">折叠</a>
								<ul>
									<li><a href="#collapse-demo">基本案例</a> </li>
									<li><a href="#collapse-use">使用方法</a> </li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="container doc-footer">
			版权所有 &copy; <a href="">Pintuer.com</a> All Rights Reserved.</div>
		<div class="doc-backtop win-backtop icon-arrow-circle-up">
		</div>
		<script src="plugins/layer/layer.js"></script>
		<script src="plugins/zclip/jquery.zclip.min.js"></script>
		<script src="plugins/site.js"></script>
	</body>

</html>
